<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS3 Backgrounds</title>
    <style>
        .css3-bg {
            padding: 8px;
            background-image: url(img_flwr.gif), url(paper.gif);
            background-position: right bottom,left top;
            background-repeat: no-repeat, repeat
        }
        .css3-bg-size {
            height: 160px;
            background: url(img_flwr.gif) left top no-repeat,url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
            background-size: 160px 60px, 10% 15%, auto
        }
        .box {
            height: 60px;
            margin-top: 24px;
            padding: 18px;
            border: 8px dashed yellowgreen;
            background-color: green;
            color: white;
        }
        .bg-clip-border-box {
            background-clip: border-box;
        }
        .bg-clip-padding-box {
            background-clip: padding-box;
        }
        .bg-clip-content-box {
            background-clip: content-box;
        }
    </style>
</head>

<body>
    <div class="css3-bg">
        <h1>CSS3 Backgrounds</h1>
        <p>CSS3 contains a few new background properties, which allow greater control of the background element.</p>
        <p>In this chapter you will learn how to add multiple background images to one element.</p>
        <p>You will also learn about the following new CSS3 properties:</p>
        <ul>
            <li>background-size</li>
            <li>background-origin</li>
            <li>background-clip</li>
        </ul>
    </div>

    <div>
        <h1 class="css3-bg-size">背景尺寸.</h1>
    </div>

    <div class="box bg-clip-border-box">background-clip: border-box;</div>

    <div class="box bg-clip-padding-box">background-clip: padding-box;</div>

    <div class="box bg-clip-content-box">background-clip: content-box;</div>
</body>

</html>